<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云计算实验1签到列表</title>
    <link rel="short icon" type="images/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/tabler.min.css">
</head>
<body class=" d-flex flex-column">
<div class="page" @vue:mounted="fetchList" v-scope>
    <div class="container">
        <div class="row py-4">
            <h2 class="page-title justify-content-center">签到列表</h2>
        </div>
    </div>
    <div class="container py-4">
        <div class="card card-md">
            <div class="card-body">
                <div class="table-responsive" >
                    <div class="d-flex justify-content-center" v-if="alreadySign&&loading">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">获取数据中...</span>
                        </div>
                    </div>
                    <table class="table table-vcenter card-table"  v-else >
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>IP</th>
                            <th>签到时间</th>
                        </tr>
                        </thead>
                        <tr v-for="sign of signList">
                            <td>{{sign.idx}}</td>
                            <td>{{sign.sno}}</td>
                            <td>{{sign.name}}</td>
                            <td>{{sign.ip}}</td>
                            <td>{{sign.signInAt}}</td>
                        </tr>
                        <tr v-if="signList.length==0">
                            <td colspan="5" class="text-center" v-if="alreadySign">暂无记录</td>
                            <td colspan="5" class="text-center text-red" v-else>还没有签到，不能查看</td>
                        </tr>
                    </table>
                </div>
                <div class="my-4 d-flex justify-content-end"><a class="btn btn-azure" href="/">返回</a></div>
            </div>
        </div>

    </div>
</div>

</body>

<script src="/static/scripts/tabler.min.js" defer></script>
<script src="/static/scripts/dayjs.min.js" defer></script>
<script type="module" src="/static/scripts/list.js">

</script>
</html>